const CracoLessPlugin = require('craco-less')
const reactHotReloadPlugin = require('craco-plugin-react-hot-reload');
const WebpackBar = require('webpackbar')
const CircularDependencyPlugin = require('circular-dependency-plugin')
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path')
const {
    when, whenDev, whenProd, whenTest, ESLINT_MODES, POSTCSS_MODES
} = require('@craco/craco')
const resolve = pathUrl => path.join(__dirname, pathUrl)
module.exports = {
    webpack: {
        alias: {
            'react-dom': '@hot-loader/react-dom',
            '@': resolve('src')
        },
        plugins: [

            new WebpackBar({ profile: true }),
            new CircularDependencyPlugin({
                exclude: /node_modules/,
                include: /src/,
                failOnError: true,
                allowAsyncCycles: false,
                cwd: process.cwd()
            }),
            new SimpleProgressWebpackPlugin(),
            ...whenProd(
                () => [
                    new UglifyJsPlugin({
                        uglifyOptions: {
                            compress: {
                                warnings: false,
                                drop_debugger: true,
                                drop_console: true,
                            },
                        },
                        sourceMap: false,
                        parallel: true,
                    })
                ],[]
            )
        ]
    },
    eslint: {
        enable: false
    },
    babel: {
        plugins: [
            ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
            ['@babel/plugin-proposal-decorators', { legacy: true }]
        ]
    },
    plugins: [
        {
            plugin: reactHotReloadPlugin
        },
        {
            plugin: CracoLessPlugin,
            options: {
                // 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: {},
                        javascriptEnabled: true
                    }
                },
                modifyLessRule: function (lessRule, context) {
                    lessRule.test = /\.module\.(less)$/
                    lessRule.exclude = undefined
                    return lessRule
                },
                cssLoaderOptions: {
                    modules: {
                        localIdentName: '[local]_[hash:base64:5]',
                    },
                },
            }
        }
    ]
}